<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oneday</title>
<link href="css/public.css" rel="stylesheet" type="text/css">

	<style>
		body{display: flex;justify-content: center;align-items: center;}
#box{position:relative;height: 60px;width: 400px;border: 3px solid #ccc;background: #ccc;border-radius: 5px;margin-top: 200px;}
#con{height: 60px;width: 0px;background: #00ffff;transition: 1s;display: block;border-radius: 5px;}
		p{position: absolute;left:190px;top:0px;font: 20px/30px "";color: #f00;}
	</style>
</head>
<body>
<div id="box">
	<span id="con"></span>
	<p id="n"></p>
</div>


</body>
</html>
<script>
var num =0;
var num1=0;
var timer = setInterval(function () {
    var p = parseInt(Math.random()*5);
    num+=p;

    con.style.width=num+"px";
    n.innerHTML=parseInt((num/400)*100)+"%";
    if(num>=400){
        clearInterval(timer);
	};
},50)





</script>